<template>
  <div>
    <h5>热销爆款</h5>
    <div class="box" v-for="(v, i) in arr" :key="i" @click="fun()">
      <a ><img :src="v.urlimg" alt="" /></a>
      <div class="right">
        <p>
          <span> B级 </span>
          <span> {{ v.title }}</span>
        </p>
        <p>{{ v.save }}</p>
        <div class="jiage">
          <p>{{ v.jg }}</p>
          <p><img :src="v.uimg" alt="" /></p>
        </div>
        <button @click="fn()">选规格</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/apis/api.js"
import Eventbus from "@/eventbus/"
export default {
  methods:{
    fn(){
      Eventbus.$emit("rexiao","我是热销的数据")
    },
    fun(){
      this.$router.push("/baopin")
    },
  },
  data(){
    return{
      arr:[]
    };
  },
  created(){
    axios("/data/list/zizizi").then((ok)=>{
      console.log(ok.data.data);
        this.arr=ok.data.data
    })
  }
  // data() {
  //   return {
  //     arr: [
  //       {
  //         title: "砂糖桔（中）1份/约500g",
  //         save: "国民级小桔子，多汁清甜吃不够",
  //         urlimg: require("@/assets/fenlei/1_03.jpg"),
  //         jg: "￥3.9",
  //         uimg: require("@/assets/fenlei/xinxiang.png"),
  //       },
  //       {
  //         title: "【宅家干果组合】腰果+开心果+瓜子1份",
  //         save: "",
  //         urlimg: require("@/assets/fenlei/1_06.jpg"),
  //         jg: "￥99",
  //         uimg: "",
  //       },
  //       {
  //         title: "沙漠蜜瓜1个/约1.6kg",
  //         save: "",
  //         urlimg: require("@/assets/fenlei/1_08.jpg"),
  //         jg: "￥27.5",
  //         uimg: require("@/assets/fenlei/xinxiang.png"),
  //       },
  //       {
  //         title: "千禧圣女果（中）1份/约500g",
  //         save: "一口爆浆，甜到上瘾",
  //         urlimg: require("@/assets/fenlei/1_10.jpg"),
  //         jg: "￥17.5",
  //         uimg: require("@/assets/fenlei/xinxiang.png"),
  //       },
  //       {
  //         title: "进口金菠萝（大） 1个/约1.6kg",
  //         save: "酸甜适口，清爽水润",
  //         urlimg: require("@/assets/fenlei/o111.jpg"),
  //         jg: "￥27.9",
  //         uimg: require("@/assets/fenlei/xinxiang.png"),
  //       },
  //     ],
  //   };
  // },
};
</script>

<style scoped>
div {
  box-sizing: border-box;
}
h5 {
  width: 94.8%;
  height: 0.25rem;
  line-height: 0.25rem;
  padding-left: 0.15rem;
  display: inline-block;
  border-top: 1px solid rgba(128, 128, 128, 0.281);
  border-bottom: 1px solid rgba(128, 128, 128, 0.281);
}
.box {
  height: 1.25rem;
  position: relative;
}
.box a > img {
  margin-top: 0.1rem;
  margin-left: 0.05rem;
  width: 1rem;
}
.box .right {
  position: absolute;
  height: 1.2rem;
  right: 0.1rem;
  top: 0.1rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.281);
}
.box .right p:nth-child(1) {
  width: 1.6rem;
  font-size: 0.14rem;
}
.box .right p:nth-child(2) {
  font-size: 0.12rem;
  color: rgb(155, 155, 155);
}
.box .right button {
  display: inline-block;
  position: absolute;
  width: 0.6rem;
  height: 0.2rem;
  line-height: 0.2rem;
  right: 0.1rem;
  bottom: 0.13rem;
  color: white;
  border-radius: 0.18rem;
  outline: none;
  border: none;
  background: rgb(63, 170, 85);
}
.box .right .jiage {
  color: red;
  font-weight: 600;
  position: absolute;
  bottom: 0.13rem;
}
.box .right p img {
  width: 0.6rem;
}
</style>